<template>
	<scroll-view class="container" scroll-y="true" refresher-enabled="true" :refresher-triggered="pullFlag"
		@refresherrefresh="reloadInit" @scrolltolower="loadMoreFn">
		<Banner :data="BannerData" autoplay="true" :interval="1000" :indicator-dots="true"
			indicator-color="rgba(117,250,131,1)"></Banner>
		<companyType class="companyTypeBox" :data="CompanyTypeData" @change="changeFid"></companyType>
		<!-- <goodsList :ID="fid" ></goodsList> -->
		<view class="goodList">
			<GoodsItem class="goodsItem" v-for="item in goodsData" :name="item.goodsname" :img="item.img"
				:price="item.price"></GoodsItem>
		</view>
		<uni-load-more :status="loadmore"></uni-load-more>
	</scroll-view>
</template>

<script setup>
	import Banner from "./components/banner.vue"
	import companyType from "./components/companyType.vue"
	import GoodsItem from "../../components/goods/index.vue"
	// import goodsList from "./components/goodsList.vue"
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		watch
	} from 'vue'
	import {
		getBannerList,
		getCompanyType,
		getGoodSList
	} from "../../api/index.js"
	import aaaaa from './components/list.vue'
	import {
		useUserStore
	} from '../../stores/user.js'
	// 使用本地存储 带过期的 
	import {
		useStorage
	} from '../../hooks/useStorage.js'
	import {
		qsAll
	} from "../../utils/requestAll"
	const Storage = useStorage()
	Storage.setCache("token", "2345678")
	const userStore = useUserStore()
	const title = ref("标题")
	const BannerData = ref([])
	const CompanyTypeData = ref([])
	const fid = ref(0)
	onShow(() => {
		console.log("走了")
		qsAll([getBannerList(), getCompanyType()]).then(e => {
			BannerData.value = e[0].value.data
			CompanyTypeData.value = e[1].value.data
			fid.value = e[1].value.data[0].fid

		})
	})

	function changeFid(id) {
		fid.value = id
	}
	// 分页
	const page = ref(1)
	// 总的数据条数
	const goodsCount = ref(0)
	// 商品列表
	const goodsData = ref([])
	// 设置加载样式''
	const loadmore = ref("more")

	function getGoodsListPage() {
		getGoodSList({
			fid: fid.value,
			pageIndex: page.value
		}).then(res => {
			// 更新总的数据条数
			goodsCount.value = res.data.count
			for (let i = 0; i < res.data.list.length; i++) {
				goodsData.value.push(res.data.list[i])
			}
			// 如果商品列表的数量等于总的数据条数 设置下拉加载 变成 没有更多了
			if (goodsData.value.length === goodsCount.value) {
				loadmore.value = "no-more"
			}
			// 关闭下拉刷新状态
			pullFlag.value = false
			uni.showToast({
				icon: "none",
				title: "加载成功"
			})
		})
	}
	// watch 监听下 fid 是否有值 如果有值 调接口获取数据 
	watch(fid, () => {
		// 如果 fid 选项卡id发生变化 需要重新调用一下 商品列表
		reloadInit()
	})
	// 下拉刷新的状态
	const pullFlag = ref(false)
	// 上拉刷新方法  该该方法 主要是 为了 重新调用接口 使用的 
	function reloadInit() {
		loadmore.value = "loading"
		// 将商品列表清空
		goodsData.value.splice(0, goodsData.value.length)
		//将 当前页面 设置为 1
		page.value = 1
		// 调用 获取列表的接口
		getGoodsListPage()
		// 下拉刷新状态 关闭
		pullFlag.value = true
	}
	// 下拉加载的方法
	function loadMoreFn(){
		loadmore.value = "loading"
		// 如果相等 说明 没有更多数据了
		if(goodsCount.value<goodsData.value.length){
			loadmore.value = "no-more"
		}else{
			page.value++
			// 调用 获取列表的接口
			getGoodsListPage()
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		font-size: 14px;
		line-height: 24px;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	/*
	.companyTypeBox{
		position: fixed;
		top: 0rpx;
		z-index: 999;
		background-color: aliceblue;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
	}
	*/
	.goodList {
		display: grid;
		grid-template-columns: auto auto;
		/* 创建两行 */
		gap: 10rpx;
		padding: 0rpx 10rpx;
	}

	.goodsItem {
		border: 1px solid red;
		overflow: hidden;
	}
</style>